<template>
  <a-card :bordered="false" :loading="loading">
    <div class="followers_container">
      <a-space class="header">
        <span>粉丝</span>
        <span>{{ `(${pagination.total})` }}</span>
      </a-space>
      <a-list class="user_info_list" item-layout="vertical" size="large" :data-source="userList"
              :pagination="userList.length>0?pagination:null">
        <template #renderItem="{ item }">
          <a-list-item :key="item.id">
            <user-info-item :user="item"/>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </a-card>
</template>

<script>
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue'
import UserInfoItem from '@/components/item/UserInfoItem'
import { GetFollowerPage } from '@/service/user'

export default defineComponent({
  props: {
    domain: String,
    userName: String
  },
  setup (props) {
    const state = reactive({
      domain: computed(() => props.domain),
      loading: true,
      userList: [],
      pagination: {
        current: 1,
        total: 0,
        onChange: (page) => {
          state.pagination.current = page
          methods.getFollowerPage()
        }
      }
    })

    const methods = reactive({
      getFollowerPage: async () => {
        state.loading = true
        const {
          page,
          count,
          list
        } = await GetFollowerPage(state.domain, state.pagination.current)
        state.pagination.current = page
        state.pagination.total = count
        state.userList = list
        state.loading = false
      }
    })

    onMounted(async () => {
      await methods.getFollowerPage()
    })

    return {
      ...toRefs(state)
    }
  },
  components: {
    UserInfoItem
  }
})
</script>

<style lang="less">
.followers_container {
  width: 100%;

  & .ant-empty {
    margin: 150px 0;
  }

  & .header {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #00000020;
    font-size: 16px;
    font-weight: 700;
    padding: 10px;
  }
}
</style>
